<script setup>
import homeHeader from '@/views/Home/components/home-header/index.vue'
import ListHeader from './components/list-header/index.vue'
import { ref, onMounted, nextTick } from 'vue'
import { titleList, centerCol, leftRightCol } from './config'
import { getGithubData } from '@/service/api.js'
const isShow = ref(true)
const github = ref({
  loading: false,
  dataSource: [],
  page: 1,
  page_size: 20,
  total: 0,
  addData() {},
})
const initLoading = ref(true)
onMounted(() => {
  isShow.value = !isShow.value
})

const getGithub = async () => {
  github.value.loading = true
  const res = await getGithubData()
  github.value.dataSource = res.data.list
  github.value.total = res.data.total
  github.value.loading = false
}
// 获取数据
getGithub()

onMounted(() => {
  setTimeout(() => {
    initLoading.value = !initLoading.value
  }, 3000)
})
</script>
<template>
  <div class="home">
    <transition-loading :isShow="isShow"></transition-loading>
    <div class="chart-list">
      <home-header></home-header>
      <div style="padding: 0 8px" class="chart-content">
        <a-row :gutter="8" class="chart-content-row">
          <a-col v-bind="leftRightCol" class="chart-content-col">
            <a-row class="chart-content-left">
              <a-col class="chart-content-left-item" :span="24">
                <module-item title="PR处理效率" :loading="initLoading">
                  <MyChart type="chart-container"></MyChart> </module-item
              ></a-col>
              <a-col class="chart-content-left-item" :span="24">
                <module-item title="OpenRank" :loading="initLoading"
                  >col-24</module-item
                ></a-col
              >
            </a-row>
          </a-col>
          <a-col v-bind="centerCol">
            <a-row class="chart-content-center">
              <a-col class="chart-content-center-item" :span="24">
                <module-item :loading="initLoading">col-24</module-item></a-col
              >
              <a-col class="chart-content-center-item" :span="24">
                <module-item title="github指数" :loading="github.loading">
                  <div class="virtual-list-content">
                    <list-header :titleList="titleList" />
                    <new-virtual-list
                      :data-source="github.dataSource"
                      :loading="github.loading"
                      @scroll-end="github.addData"
                    >
                      <template #item="{ item }">
                        <a-tooltip
                          placement="top"
                          color="rgba(73, 146, 255, 0.8)"
                        >
                          <template #title>
                            <span>项目名：{{ item.name }}</span>
                          </template>
                          <div class="virtual-list-item">
                            <span class="virtual-list-item-col">{{
                              item.name
                            }}</span>
                            <span class="virtual-list-item-col">{{
                              item.influence
                            }}</span>
                            <span class="virtual-list-item-col">{{
                              item.trend
                            }}</span>
                            <span class="virtual-list-item-col">{{
                              item.response
                            }}</span>
                            <span class="virtual-list-item-col">{{
                              item.activity
                            }}</span>
                            <span class="virtual-list-item-col">{{
                              item.github
                            }}</span>
                          </div>
                        </a-tooltip>
                      </template>
                    </new-virtual-list>
                  </div>
                </module-item></a-col
              >
            </a-row></a-col
          >
          <a-col v-bind="leftRightCol">
            <a-row class="chart-content-right">
              <a-col class="chart-content-right-item" :span="24">
                <module-item title="关注度" :loading="initLoading"
                  >col-24</module-item
                ></a-col
              >
              <a-col class="chart-content-right-item" :span="24">
                <module-item title="开发者活跃度" :loading="initLoading">
                  >col-24</module-item
                ></a-col
              >
              <a-col class="chart-content-right-item" :span="24">
                <module-item title="项目活跃度" :loading="initLoading">
                  >col-24</module-item
                ></a-col
              >
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/index-bg.png') no-repeat;
  background-size: 100% 100%;
  .chart-list {
    height: 100%;
    .chart-content {
      height: calc(100% - 77px);
      margin-top: 12px;
      .chart-content-row,
      .chart-content-col {
        height: 100%;
      }
      &-left {
        flex-direction: column;
        row-gap: 8px !important;
        height: 100%;

        &-item:nth-child(1) {
          flex: 2;
        }

        &-item:nth-child(2) {
          flex: 1;
        }
      }
      &-center {
        flex-direction: column;
        row-gap: 8px !important;
        height: 100%;

        &-item:nth-child(1) {
          flex: 2;
        }

        &-item:nth-child(2) {
          flex: 1;
        }

        .virtual-list-content {
          display: flex;
          flex-direction: column;
          height: 98%;
          padding: 0 8px;

          .virtual-list-item {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 4px;
            color: rgb(255 255 255);
            cursor: pointer;

            &:hover {
              color: #68d8ff;
              background: rgb(255 255 255 / 10%);
            }

            &-col {
              width: 16%;
              overflow: hidden;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            &-col:nth-child(1) {
              width: 19.5%;
              text-align: left;
            }
          }
        }
      }
      &-right {
        flex-direction: column;
        row-gap: 8px !important;
        height: 100%;

        &-item {
          flex: 1;
        }
      }
    }
  }
}
</style>
